<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :columns="columns"
      :data-grid-title="dataGridTitle"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">软件类型</div>
            </template>
            <div>
              <el-form-item prop="softwareTypeCode">
                <dict-selector dict-code="SOFTWARE_TYPE" v-model="formData.softwareTypeCode"></dict-selector>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">软件名称</div>
            </template>
            <div>
              <el-form-item prop="softwareName">
                <el-input v-model="formData.softwareName" placeholder="请输入软件名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">软件说明</div>
            </template>
            <div>
              <el-form-item prop="softwareMemo">
                <el-input v-model="formData.softwareMemo" placeholder="请输入软件说明..." maxlength="250" show-word-limit type="textarea"></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">软件包</div>
            </template>
            <el-form-item prop="softwareMemo">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :auto-upload="false"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">上传软件包</el-button>
                <template #tip>
                  <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { ISoftware } from './software';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';

defineOptions({
  name: 'AppSoftware',
});
const formData = ref<ISoftware>({
  id: '',
  softwareTypeCode: '',
  softwareName: '',
  softwareMemo: '',
  path: '',
  analysisRuleConfig: '',
  sortNo: 1,
});

const dataGridTitle = '软件包管理';
const renderFormTitle = (stateValue: 'add' | 'edit', data: ISoftware) => {
  if (stateValue === 'add') {
    return '软件包信息';
  } else {
    return data.softwareName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'softwareTypeName',
    label: '软件类型',
    align: 'left',
  },
  {
    prop: 'softwareName',
    label: '软件名称',
    align: 'left',
  },
  {
    prop: 'softwareMemo',
    label: '软件说明',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/app/software/#{id}',
  delInfoMsgEmphasize: '#{softwareName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/app/software/list',
};

const getPageHttpConfig: IGetPageHttpConfig<ISoftware> = {
  url: '/admin-api/app/software/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<ISoftware> = {
  url: '/admin-api/app/software/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<ISoftware> = {
  url: '/admin-api/app/software',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<ISoftware> = {
  url: '/admin-api/app/software',
};

const fileList = ref<UploadUserFile[]>([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
]);

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
  // upload.value!.clearFiles()
  // const file = files[0] as UploadRawFile
  // file.uid = genFileId()
  // upload.value!.handleStart(file)
  if (files.length > 0) {
    for (let i = 0; i < files.length; i++) {
      fileList.value.push(files[i]);
    }
  }
};

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles.length);
  return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
    () => true,
    () => false,
  );
};
</script>
